<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://config.com" prefix="config" %>
<%@ taglib uri="http://fileTag.com" prefix="f" %>
<style>
    .navbar {
        height: 70px;
        background: #fff;
    }
    .navbar-inner,
    .navbar-container,
    .navbar-header {
        height: 100%;
    }
    .navbar-brand {
        position: absolute;
        top: 50%;
        left: 25px;
        margin-top: -22.5px;
    }
    .navbar-container {
        padding: 0 !important;
    }
    .sidebar-collapse {
        top: 50% !important;
        left: 215px !important;
        margin-top: -26px;
    }

    .iconWordSpan{
        -moz-user-select:none;/*火狐*/

        -webkit-user-select:none;/*webkit浏览器*/

        -ms-user-select:none;/*IE10*/

        -khtml-user-select:none;/*早期浏览器*/

        user-select:none;
    }
    .position {
        position: absolute;
        top: 500px;
        right: 20px;
        width: 77px;
        height: 68px;
        background: url("assets/img/nav-img/btn_feedback.png");
        cursor: pointer;
    }
</style>
<!-- Loading Container -->
<div class="loading-container">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored"></div>
                            <div class="rotator"></div>
                        </div>
                        <div class="rotator colored"></div>
                    </div>
                    <div class="rotator"></div>
                </div>
                <div class="rotator"></div>
            </div>
            <div class="rotator"></div>
        </div>
        <div class="rotator"></div>
    </div>
</div>
<div class="loading-ajax">
    <img alt="请稍后,加载中..." src="assets\img\loading_big.gif">
</div>
<!-- /Loading Container -->
<!-- Navbar -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="navbar-container">
            <!-- Navbar Barnd -->
            <div class="navbar-header pull-left">
                <a href="javascript:" class="navbar-brand">
                    <small>
                        <img src="<config:getConfigValue key="platformLogo"/>" alt=""
                             style="width: auto; height:auto;margin: -5px 0px 0px 0px;"/>
                        <span style="font-size: 16px;color: #000;height: 45px;"><config:getConfigValue key="platformName"/></span>
                    </small>
                </a>
            </div>
            <!-- /Navbar Barnd -->

            <!-- Sidebar Collapse -->
            <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="collapse-icon fa fa-bars"></i>
            </div>
            <!-- /Sidebar Collapse -->
            <!-- Account Area and Settings --->

            <div class="navbar-header pull-right" style="width: 200px;background-color: #f8f8f8;box-shadow:0px 0px 10px rgba(122,161,184,0.3);position: relative;cursor: pointer;line-height: 70px;text-align: center;vertical-align: middle">
                <div onclick="showOrHidden(this)" class="fachoooseShowDiv" value="1">
                    <span style="display:inline-block;width: 25px;height: 25px;vertical-align: middle"><img src='assets/img/nav-img/icon-myself.png' alt="" style="width: 100%;height: 100%;"></span>
                    <span style="display: inline-block;margin-left: 5px;margin-right: 15px;vertical-align: middle;height: 25px;padding-top: 10px"><i class="fa fa-caret-up fachoooseShow" style="color:#15a4fa;font-size: 14px;"></i>
                </span><span style="vertical-align: middle;height: 25px;line-height: 32px;display:inline-block;color: #7e8a9a" class="iconWordSpan">我的园所(院长)</span>

                </div>

                <ul class="navbarHearderIcons navicons hidden" style="clear: both;padding-left: 0px!important;padding-top: 10px;padding-bottom: 10px;width: 200px;height: 80px;background-color: #f8f8f8;position: absolute;left: 0;top: 70px;border-top: 1px solid #EFF2F3;box-shadow:0px 1px 10px rgba(122,161,184,0.3);">
                    <span style="display:block;line-height: 30px;color: #15a4fa" onclick="showSetMyPasswordDialog()">修改密码</span>
                    <span style="display:block;line-height: 30px;color: #5b7287" onclick="logout()" >退出登录</span>
                    <%--<li class="" style="width: 70px;height: 100%;line-height: 100%;margin-right: 0 !important;text-align: center;position: relative;cursor: pointer;">--%>
                        <%--<a href="javascript:void(0)" style="display: inline-block;width: 25px;height: 25px;position: absolute;left: 50%;top: 50%;margin-top: -25px;margin-left: -12.5px;">--%>
                            <%--<img src="assets/img/nav-img/icon-close.png" alt="" title="退出" style="width: 100%;height: 100%;">--%>
                        <%--</a>--%>
                        <%--<span style="display: inline-block;color: #8a94a4;width: 100%;position: absolute;bottom: 18%;left: 0;">退出</span>--%>
                    <%--</li>--%>

                    <%--<li class="" style="width: 70px;height: 100%;line-height: 100%;margin-right: 0 !important;text-align: center;position: relative;">--%>
                        <%--<a href="javascript:void(0)" style="display: inline-block;width: 25px;height: 25px;position: absolute;left: 50%;top: 50%;margin-top: -25px;margin-left: -12.5px;"><img src="assets/img/nav-img/icon-feedback.png" alt="" title="意见反馈" style="width: 100%;height: 100%;"></a>--%>
                        <%--<span style="display: inline-block;color: #8a94a4;width: 100%;position: absolute;bottom: 18%;left: 0;">意见反馈</span>--%>
                    <%--</li>--%>

                    <%--<li class="" style="width: 70px;height: 100%;line-height: 100%;margin-right: 0 !important;text-align: center;position: relative;">--%>
                        <%--<a href="javascript:void(0)" class="login-area dropdown-toggle" data-toggle="dropdown" style="display: inline-block;width: 25px;height: 25px;position: absolute;left: 50%;top: 50%;margin-top: -25px;margin-left: -12.5px;">--%>
                            <%--<img src="assets/img/nav-img/icon-myself.png" alt=""  title="个人信息" style="width: 100%;height: 100%;">--%>
                            <%--&lt;%&ndash;<i class="glyphicon glyphicon-chevron-down" style="color: #727f93;font-size: 9px"></i>&ndash;%&gt;--%>
                        <%--</a>--%>
                        <%--<span style="display: inline-block;color: #8a94a4;width: 100%;position: absolute;bottom: 18%;left: 0;">个人信息</span>--%>
                        <%--<ul class="pull-right dropdown-menu dropdown-login-area" style="min-width: 80px!important;margin-right: 10px">--%>
                            <%--<li onclick="logout()" style="line-height: 25px!important;font-size: 13px">--%>
                                <%--个人信息--%>
                            <%--</li>--%>
                        <%--</ul>--%>
                    <%--</li>--%>
                </ul>
            </div>
            <script>
                function showOrHidden(that) {
                    var val = $(that).attr("value");
                    if(val == 0){
                        $(".navbarHearderIcons").addClass("hidden");
                        $(that).attr("value","1")
                        $(".fachoooseShow").removeClass("fa-caret-down").addClass("fa-caret-up");
                    }
                    if(val == 1){
                        $(".navbarHearderIcons").removeClass("hidden");
                        $(that).attr("value","0");
                        $(".fachoooseShow").removeClass("fa-caret-up").addClass("fa-caret-down");
                    }
                }
            </script>
            <div class="navar-header-middle" style="float: right;margin-right: 50px;line-height: 70px;font-size: 14px;color: #abbdce">
                <span style="margin-right: 25px">北京广安门亲子园</span><span>合同编号:0001234567</span>
            </div>

            <div class="position" onclick="Remarks()"></div>
            <script>
                /**
                 * 备注修改
                 * @param that
                 */
                function Remarks() {
                    ajaxRequest("TssFeedbackController/TssFeedback.do", {}, function (html) {
                        getTopWin(html).bootbox.dialog({
                            message: html,
                            title: "意见反馈",
                            className: 'myDialog tssMemberCheckDialog'
                        });
                        $(".modal-header").find(".bootbox-close-button").removeClass("close");
                        $(".modal-header").find(".bootbox-close-button").html("");
                    }, function () {
                        ajaxError("加载页面失败!")
                    }, "get", "html")
                }

            </script>
            <div class="navbar-header pull-right hidden">
                <div class="navbar-account">
                    <ul class="account-area">
                        <li>
                            <a class=" dropdown-toggle" data-toggle="dropdown" title="Help" href="javascript:">
                                <i class="icon fa fa-warning"></i>
                            </a>
                            <!--Notification Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <div class="notification-icon">
                                                <i class="fa fa-phone bg-themeprimary white"></i>
                                            </div>
                                            <div class="notification-body">
                                                <span class="title">Skype meeting with Patty</span>
                                                <span class="description">01:00 pm</span>
                                            </div>
                                            <div class="notification-extra">
                                                <i class="fa fa-clock-o themeprimary"></i>
                                                <span class="description">office</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <div class="notification-icon">
                                                <i class="fa fa-check bg-darkorange white"></i>
                                            </div>
                                            <div class="notification-body">
                                                <span class="title">Uncharted break</span>
                                                <span class="description">03:30 pm - 05:15 pm</span>
                                            </div>
                                            <div class="notification-extra">
                                                <i class="fa fa-clock-o darkorange"></i>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <div class="notification-icon">
                                                <i class="fa fa-gift bg-warning white"></i>
                                            </div>
                                            <div class="notification-body">
                                                <span class="title">Kate birthday party</span>
                                                <span class="description">08:30 pm</span>
                                            </div>
                                            <div class="notification-extra">
                                                <i class="fa fa-calendar warning"></i>
                                                <i class="fa fa-clock-o warning"></i>
                                                <span class="description">at home</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <div class="notification-icon">
                                                <i class="fa fa-glass bg-success white"></i>
                                            </div>
                                            <div class="notification-body">
                                                <span class="title">Dinner with friends</span>
                                                <span class="description">10:30 pm</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="dropdown-footer ">
                                   <span>
                                       Today, March 28
                                   </span>
                                    <span class="pull-right">
                                       10°c
                                       <i class="wi wi-cloudy"></i>
                                   </span>
                                </li>
                            </ul>
                            <!--/Notification Dropdown-->
                        </li>
                        <li>
                            <a class="wave in dropdown-toggle" data-toggle="dropdown" title="Help" href="javascript:">
                                <i class="icon fa fa-envelope"></i>
                                <span class="badge">3</span>
                            </a>
                            <!--Messages Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-messages">
                                <li>
                                    <a href="javascript:">
                                        <img src="assets/img/avatars/divyia.jpg" class="message-avatar"
                                             alt="Divyia Austin">
                                        <div class="message">
                                           <span class="message-sender">
                                               Divyia Austin
                                           </span>
                                            <span class="message-time">
                                               2 minutes ago
                                           </span>
                                            <span class="message-subject">
                                               Here's the recipe for apple pie
                                           </span>
                                            <span class="message-body">
                                               to identify the sending application when the senders image is shown for the main icon
                                           </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <img src="assets/img/avatars/bing.png" class="message-avatar"
                                             alt="Microsoft Bing">
                                        <div class="message">
                                           <span class="message-sender">
                                               Bing.com
                                           </span>
                                            <span class="message-time">
                                               Yesterday
                                           </span>
                                            <span class="message-subject">
                                               Bing Newsletter: The January Issue‏
                                           </span>
                                            <span class="message-body">
                                               Discover new music just in time for the Grammy® Awards.
                                           </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <img src="assets/img/avatars/adam-jansen.jpg" class="message-avatar"
                                             alt="Divyia Austin">
                                        <div class="message">
                                           <span class="message-sender">
                                               Nicolas
                                           </span>
                                            <span class="message-time">
                                               Friday, September 22
                                           </span>
                                            <span class="message-subject">
                                               New 4K Cameras
                                           </span>
                                            <span class="message-body">
                                               The 4K revolution has come over the horizon and is reaching the general populous
                                           </span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <!--/Messages Dropdown-->
                        </li>

                        <li>
                            <a class="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="javascript:">
                                <i class="icon fa fa-tasks"></i>
                                <span class="badge">4</span>
                            </a>
                            <!--Tasks Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
                                <li class="dropdown-header bordered-darkorange">
                                    <i class="fa fa-tasks"></i>
                                    4 Tasks In Progress
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <span class="pull-left">Account Creation</span>
                                            <span class="pull-right">65%</span>
                                        </div>

                                        <div class="progress progress-xs">
                                            <div style="width:65%" class="progress-bar"></div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <span class="pull-left">Profile Data</span>
                                            <span class="pull-right">35%</span>
                                        </div>

                                        <div class="progress progress-xs">
                                            <div style="width:35%" class="progress-bar progress-bar-success"></div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <span class="pull-left">Updating Resume</span>
                                            <span class="pull-right">75%</span>
                                        </div>

                                        <div class="progress progress-xs">
                                            <div style="width:75%" class="progress-bar progress-bar-darkorange"></div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:">
                                        <div class="clearfix">
                                            <span class="pull-left">Adding Contacts</span>
                                            <span class="pull-right">10%</span>
                                        </div>

                                        <div class="progress progress-xs">
                                            <div style="width:10%" class="progress-bar progress-bar-warning"></div>
                                        </div>
                                    </a>
                                </li>
                                <li class="dropdown-footer">
                                    <a href="javascript:">
                                        See All Tasks
                                    </a>
                                    <button class="btn btn-xs btn-default shiny darkorange icon-only pull-right"><i
                                            class="fa fa-check"></i></button>
                                </li>
                            </ul>
                            <!--/Tasks Dropdown-->
                        </li>
                        <li>
                            <a class="login-area dropdown-toggle" data-toggle="dropdown">
                                <div class="avatar" title="View your public profile">
                                    <f:files fileIds="${loginUser.headPortrait}" var="file">
                                        <img src="<config:getConfigValue key='fileRedPath'/>/${file.relativePath }/${file.fileName }">
                                    </f:files>
                                </div>
                                <section>
                                    <h2><span class="profile"
                                              style="min-width: 100px;"><span></span></span></h2>
                                </section>
                            </a>
                            <!--Login Area Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                <li class="username"><a></a></li>
                                <li class="email"><a></a></li>
                                <!--Avatar Area-->
                                <li>
                                    <div class="avatar-area">
                                        <f:files fileIds="${loginUser.headPortrait}" var="file">
                                            <img class="avatar"
                                                 src="<config:getConfigValue key='fileRedPath'/>/${file.relativePath }/${file.fileName }">
                                        </f:files>
                                        <span class="caption">Change Photo</span>
                                    </div>
                                </li>
                                <!--Avatar Area-->
                                <li class="edit">
                                    <a href="profile.html" class="pull-left">Profile</a>
                                    <a href="javascript:" class="pull-right" onclick="toEdit()">Setting</a>
                                    <script type="text/javascript">
                                        function toEdit() {
                                            var viewPath = 'sysAdminUserController/LoginEditView.do';
                                            var isRecord = true;
                                            var method = "GET";
                                            toView(viewPath, isRecord, method, null);
                                        }
                                    </script>
                                </li>
                                <!--Theme Selector Area-->
                                <li class="theme-area">
                                    <ul class="colorpicker" id="skin-changer">
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#5DB2FF;"
                                               rel="assets/css/skins/blue.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#2dc3e8;"
                                               rel="assets/css/skins/azure.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#03B3B2;"
                                               rel="assets/css/skins/teal.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#53a93f;"
                                               rel="assets/css/skins/green.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#FF8F32;"
                                               rel="assets/css/skins/orange.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#cc324b;"
                                               rel="assets/css/skins/pink.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#AC193D;"
                                               rel="assets/css/skins/darkred.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#8C0095;"
                                               rel="assets/css/skins/purple.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#0072C6;"
                                               rel="assets/css/skins/darkblue.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#585858;"
                                               rel="assets/css/skins/gray.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#474544;"
                                               rel="assets/css/skins/black.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="javascript:"
                                               style="background-color:#001940;"
                                               rel="assets/css/skins/deepblue.min.css"></a></li>
                                    </ul>
                                </li>
                                <!--/Theme Selector Area-->
                                <li class="dropdown-footer">
                                    <a href="javascript:" onclick="logout()">
                                        Sign out
                                    </a>
                                </li>
                            </ul>
                            <!--/Login Area Dropdown-->
                        </li>
                        <!-- /Account Area -->
                        <!--Note: notice that setting div must start right after account area list.
                        no space must be between these elements-->
                        <!-- Settings -->
                    </ul>
                    <div class="setting">
                        <a id="btn-setting" title="Setting" href="javascript:">
                            <i class="icon glyphicon glyphicon-cog"></i>
                        </a>
                    </div>
                    <div class="setting-container">
                        <label>
                            <input type="checkbox" id="checkbox_fixednavbar">
                            <span class="text">Fixed Navbar</span>
                        </label>
                        <label>
                            <input type="checkbox" id="checkbox_fixedsidebar">
                            <span class="text">Fixed Left Menus</span>
                        </label>
                        <label>
                            <input type="checkbox" id="checkbox_fixedbreadcrumbs">
                            <span class="text">Fixed BreadCrumbs</span>
                        </label>
                        <label id="fixedheaderLabel">
                            <input type="checkbox" id="checkbox_fixedheader">
                            <span class="text">Fixed Header</span>
                        </label>
                        <label>
                            <input type="checkbox" id="checkbox_showheader">
                            <span class="text">Show Header</span>
                        </label>
                    </div>
                    <!-- Settings -->
                </div>
            </div>
            <!-- /Account Area and Settings -->
        </div>
    </div>
</div>
<!-- /Navbar -->
<script type="text/javascript">
    function showSetMyPasswordDialog(){
        ajaxRequest("switchView.do?viewPath=sysPage/platform/sysAdminUser/resetPassword.html",null,function(html){
            var dialog = bootbox.dialog({
                title: '重置密码',
                message: html,
                buttons:false
            });
        },function () {
            ajaxError("加载重置密码页面失败")
        },"get","HTML")
    }
</script>
